﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <meta content="width=device-width, user-scalable=no" name="viewport"/>
    <meta content="telephone=no" name="format-detection"/>
    <title></title>
    <script src="echarts.min.js"></script>
    <script src="jquery.min.js"></script>
    <script src="echarts-liquidfill.min.js"></script>

    <style>

        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .left_right {
            width: 100%;
            overflow: hidden;
            font-size: 4.5vw;
            text-align: center;
            line-height: 12vw;
            background-color: #f8f8f8;
        }

        .left_right .left {
            float: left;
            width: 100%;
        }

        .left_content {
            overflow: hidden
        }

        .left_content .content_div {
            overflow: hidden;
            float: left;
            margin-bottom: 7%;
        }

        .left_content .content_div .content_div_title {
            text-align: center;
            font-size: 4vw;
            margin-top: 20px;
            height: 25px;
            color: #606060;
        }

        .left_content .content_div .content_div_pie {
            width: 25vw;
            height: 35vw;
        }


    </style>
    <script>
        window.onload = function () {
            var content = '{\"BFL\":0.4182}';
            JavaCallJs(content);
        }


    </script>
</head>
<body>
<div class="left_content" id="leftId"></div>
</body>
<script type="text/javascript">
    function JavaCallJs(content) {

        //设置左边图表数据
        $("#leftId").empty();
        var div = document.createElement("div");
        div.id = "newDivLeft";
        div.className = 'content_div';
        div.style.width = document.documentElement.clientWidth + 'px';

        //图表标题div
<!--        var div1 = document.createElement("div");-->
<!--        div1.id = "new1DivLeft";-->
<!--        div1.className = 'content_div_title';-->
<!--        div1.innerHTML = "当月产品销量";-->
<!--        div1.style.fontSize = "larger";-->
<!--        div1.style.color = "black";-->
<!--        div.appendChild(div1);-->

        //图表div
        var div2 = document.createElement("div");
        div2.id = "new2DivLeft";
        div2.className = 'content_div_pie';
        div2.style.width = document.documentElement.clientWidth + 'px';
        div2.style.height = document.documentElement.clientHeight + 'px';
        div.appendChild(div2);

        //设置圆形图表
        setChart(content, div2);
        $("#leftId").append(div);
    }

    function setChart(item, div) {
        var myChart = echarts.init(div);
        var json = JSON.parse(item);

        var option = {
            title: {
                text: '本周拜访\n成功率',
                left: 'center',
                bottom: 0,
                textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                    fontSize: 12,
                    fontWeight: 'normal',
                },
            },
            series: [{
                type: 'liquidFill',
                radius: '80%', // 水球图的半径
                center: ['50%', '48%'],
                outline: {
                    show: true,
                    borderDistance: 0, // 边框线与图表的距离 数字
                    itemStyle: {
                        opacity: 1, // 边框的透明度   默认为 1
                        borderWidth: 4, // 边框的宽度
                        shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
                        shadowColor: '#fff', // 边框的阴影颜色,
                        borderColor: '#ECECEC' // 边框颜色
                    }
                },
                // 图形样式
                itemStyle: {
                    // color: '#1ECFFF', // 水球显示的背景颜色
                    opacity: 0.5, // 波浪的透明度
                    shadowBlur: 15, // 波浪的阴影范围
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#1ECFFF'
                    }, {
                        offset: 1,
                        color: '#1770FD'
                    }])
                },
                backgroundStyle: {
                    color: '#fff', // 水球未到的背景颜色
                },
                label: {
                    normal: {
                        show: true,
                        formatter: (json.BFL  *100).toFixed(2) + "%",
                        textStyle: {
                            color: '#242038',           // 在波浪上方时的文字颜色
                            insideColor: '#242038',     // 在波浪下方时的文字颜色
                            fontSize: 12,
                            fontWeight: 'normal',
                        }
                    }
                },
                data: [{
                    value: json.BFL,
                }]
            }]
        };


        myChart.setOption(option);
    }


</script>
</html>